<template>
  <div class="execution">
    <basic-container>
      <div class="searchBox">
        <el-form ref="form" :model="formData" label-width="80px" size="mini">
          <el-row :gutter="20">
            <el-col :span="8"
              ><div>
                <el-form-item label="缴费日期">
                  <el-date-picker
                    v-model="formData.dateArr"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div>
                <el-form-item label="计费月份">
                  <el-date-picker
                    v-model="formData.month"
                    type="month"
                    placeholder="选择月"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                  >
                  </el-date-picker>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div>
                <el-form-item label="车牌号">
                  <el-input v-model="formData.carNumber"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div>
                <el-form-item label="缴费状态">
                  <el-select
                    v-model="formData.status"
                    placeholder="请选择缴费状态"
                  >
                    <el-option
                      v-for="(item, index) in statusList"
                      :key="index"
                      :label="item.dictName"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div>
                <el-button size="mini" type="primary" @click="search()"
                  >查询</el-button
                >
                <el-button size="mini" @click="reset()">重置</el-button>
                <el-button size="mini" @click="downLoadFile()">导出</el-button>

                <el-button
                  v-if="activeName == '4'"
                  size="mini"
                  type="default"
                  icon="el-icon-upload2"
                  @click="rmImport()"
                >
                  导入
                </el-button>
              </div></el-col
            >
          </el-row>
        </el-form>
      </div>
      <div class="tabBox">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="1">
            <div class="tableBox">
              <el-table
                :data="tableData1"
                style="width: 100%"
                stripe
                border
                :header-cell-style="{ background: '#409EFF', color: '#FFFFFF' }"
              >
                
                <el-table-column label="编号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.No }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="车牌号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.orderType == 6">{{
                      scope.row.spaceCarCode
                    }}</span>
                    <span v-else>{{ scope.row.carCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="类型"
                  show-overflow-tooltip
                  :formatter="$_formatOrderType"
                  prop="orderType"
                >
                </el-table-column>
                <el-table-column
                  label="停车时长/有效时间"
                  show-overflow-tooltip
                  width="300px"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.orderType == 1"
                      >{{ scope.row.inTime }}至{{
                        scope.row.outTime ? scope.row.outTime : "/"
                      }}</span
                    >
                    <span v-else-if="scope.row.orderType == 6"
                      >{{ scope.row.spaceBeginTime.substring(0, 10) }}至{{
                        scope.row.spaceEndTime
                          ? scope.row.spaceEndTime.substring(0, 10)
                          : "/"
                      }}</span
                    >
                    <span v-else
                      >{{ scope.row.beginTime.substring(0, 10) }}至{{
                        scope.row.endTime
                          ? scope.row.endTime.substring(0, 10)
                          : "/"
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column label="费用(元)" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ (scope.row.amount / 100).toFixed(2) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="缴费状态"
                  show-overflow-tooltip
                  :formatter="$_formatStatus"
                  prop="orderStatus"
                >
                </el-table-column>

                <el-table-column label="缴费时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.finishTime ? scope.row.finishTime : "/"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="缴费方式"
                  show-overflow-tooltip
                  :formatter="$_formatPayTypeList"
                  prop="paymentCode"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="fenyeBox">
              <el-pagination
                :hide-on-single-page="false"
                @current-change="handleCurrentChange1"
                :current-page.sync="currentPage1"
                :page-size="perPage1"
                layout="prev, pager, next, total,jumper"
                :total="totalNumber1"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="临停车" name="2">
            <div class="tableBox">
              <el-table
                :data="tableData2"
                style="width: 100%"
                stripe
                border
                :header-cell-style="{ background: '#409EFF', color: '#FFFFFF' }"
              >
                <el-table-column label="编号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.No }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="车牌号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.carCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="进场时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.inTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="出场时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.outTime ? scope.row.outTime : "/"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="停车时长" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{
                      countTime(scope.row.inTime, scope.row.outTime)
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="费用(元)" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ (scope.row.amount / 100).toFixed(2) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="缴费时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.finishTime ? scope.row.finishTime : "/"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="缴费方式"
                  show-overflow-tooltip
                  :formatter="$_formatPayTypeList"
                  prop="paymentCode"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="fenyeBox">
              <el-pagination
                :hide-on-single-page="false"
                @current-change="handleCurrentChange2"
                :current-page.sync="currentPage2"
                :page-size="perPage2"
                layout="prev, pager, next, total,jumper"
                :total="totalNumber2"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="月票车" name="3">
            <div class="tableBox">
              <el-table
                :data="tableData3"
                style="width: 100%"
                stripe
                border
                :header-cell-style="{ background: '#409EFF', color: '#FFFFFF' }"
              >
                <el-table-column label="编号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.No }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="公司名称" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.companyName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="车牌号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.carCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="有效时间"
                  show-overflow-tooltip
                  width="160px"
                >
                  <template slot-scope="scope">
                    <span
                      >{{ scope.row.beginTime.substring(0, 10) }}至{{
                        scope.row.endTime.substring(0, 10)
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column label="费用(元)" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ (scope.row.amount / 100).toFixed(2) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="姓名" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.userName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="联系方式" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.userPhone }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="缴费时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.finishTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="缴费方式"
                  show-overflow-tooltip
                  :formatter="$_formatPayTypeList"
                  prop="paymentCode"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="fenyeBox">
              <el-pagination
                :hide-on-single-page="false"
                @current-change="handleCurrentChange3"
                :current-page.sync="currentPage3"
                :page-size="perPage3"
                layout="prev, pager, next, total,jumper"
                :total="totalNumber3"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="固定停车位车辆" name="4">
            <div class="tableBox">
              <el-table
                :data="tableData4"
                style="width: 100%"
                stripe
                border
                :header-cell-style="{ background: '#409EFF', color: '#FFFFFF' }"
              >
                <el-table-column label="编号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.No }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="车位号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.spaceNum }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="公司名称" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.spaceCompany }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="车牌号" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.spaceCarCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="有效时间"
                  show-overflow-tooltip
                  width="200px"
                >
                  <template slot-scope="scope">
                    <span
                      >{{ scope.row.spaceBeginTime.substring(0, 10) }}至{{
                        scope.row.spaceEndTime
                          ? scope.row.spaceEndTime.substring(0, 10)
                          : "/"
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column label="费用(元)" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ (scope.row.amount / 100).toFixed(2) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="姓名" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.spaceCarName ? scope.row.spaceCarName : "/"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="联系方式" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.spaceCarPhone ? scope.row.spaceCarPhone : "/"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="缴费时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.spacePayTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="缴费方式"
                  show-overflow-tooltip
                  :formatter="$_formatPayTypeList"
                  prop="paymentCode"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="fenyeBox">
              <el-pagination
                :hide-on-single-page="false"
                @current-change="handleCurrentChange4"
                :current-page.sync="currentPage4"
                :page-size="perPage4"
                layout="prev, pager, next, total,jumper"
                :total="totalNumber4"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-dialog
        title="批量导入"
        :visible.sync="uploadlg.show"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="500px"
        :before-close="BeforeClose"
      >
        <el-button style="color: #409eff" @click="onDowmload"
          >下载填充数据</el-button
        >
        <br />
        <br />
        <el-upload
          ref="upload"
          class="upload-box"
          drag
          action=""
          :http-request="HttpRequest"
          :auto-upload="false"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          name="files"
          :before-upload="beforeUpload"
          :data="uploadlg.extraData"
          :on-change="changeUpload"
          :on-remove="reMoveUpload"
          :on-success="uploadSuccess"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击选择导入文件</em>
          </div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-upload2"
            @click="submitFile"
            >导入</el-button
          >
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import * as parking from "@/api/parking/parking.js";
export default {
  data() {
    return {
      activeName: "1",
      //分页数据
      nowPage1: 1,
      perPage1: 10,
      currentPage1: 1,
      PageCount1: 0,
      totalNumber1: 0,
      nowPage2: 1,
      perPage2: 10,
      currentPage2: 1,
      PageCount2: 0,
      totalNumber2: 0,
      nowPage3: 1,
      perPage3: 10,
      currentPage3: 1,
      PageCount3: 0,
      totalNumber3: 0,
      nowPage4: 1,
      perPage4: 10,
      currentPage4: 1,
      PageCount4: 0,
      totalNumber4: 0,
      //网关B2C 1、 网关B2B 2、微信小程序 3
      payTypeList: [
        { dictValue: "1", dictName: "网关B2C" },
        { dictValue: "2", dictName: "网关B2B" },
        { dictValue: "3", dictName: "微信小程序" },
        { dictValue: "4", dictName: "固定车导入" },
      ],
      //1临停车。 2长租车:新增车辆。 3长租车:续费。 4长租车:断缴续费。 5长租车:更换车牌
      orderTypeList: [
        { dictValue: 1, dictName: "临停车" },
        { dictValue: 2, dictName: "长租车" },
        { dictValue: 3, dictName: "长租车" },
        { dictValue: 4, dictName: "长租车" },
        { dictValue: 5, dictName: "长租车" },
        { dictValue: 6, dictName: "固定车位车辆" },
      ],
      formData: {
        status: "",
        dateArr: [],
        carNumber: "",
        month: "",
      },
      uploadlg: {
        show: false,
        noUploadFile: true,
      },
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      statusList: [
        {
          dictValue: 1,
          dictName: "待支付",
        },
        {
          dictValue: 2,
          dictName: "已支付",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    search() {
      this.init();
    },
    reset() {
      this.formData = {
        status: "",
        dateArr: [],
        carNumber: "",
        month: "",
      };
    },
    init() {
      this.findCarPage();
      this.findTemporaryCarPage();
      this.findLongCarPage();
      this.findCarSpacePage();
    },
    onDowmload() {
      ExportFile("/meter/mrprivatemeterwriterecord/downloadPrivateMeter");
    },
    BeforeClose() {
      this.uploadlg.show = false;
      this.$refs.upload.clearFiles();
    },
    downLoadFile() {
      if (this.activeName == "1") {
        this.exportFile("/ppc/admin/car/exportCarList");
      }
      if (this.activeName == "2") {
        this.exportFile("/ppc/admin/car/exportTemporaryCarList");
      }
      if (this.activeName == "3") {
        this.exportFile("/ppc/admin/car/exportLongCarList");
      }
      if (this.activeName == "4") {
        this.exportFile("/ppc/admin/car/exportSpaceCarList");
      }
    },
    exportFile(url) {
      let data = {
        carCode: this.formData.carNumber,
        BPayDate: this.formData.dateArr[0],
        EPayDate: this.formData.dateArr[1],
        month: this.formData.month,
        orderStatus: this.formData.status,
      };
      parking.ExportFile(url, data);
    },
    HttpRequest(file) {
      let fromdata = new FormData();
      fromdata.append("file", file.file);
      parking.ImportFile(fromdata).then((res) => {
        if (res.data.code == 0) {
          this.uploadlg.show = false;
          this.$message({
            type: "success",
            message: "导入成功!",
          });
          this.$refs.upload.clearFiles();
          this.getList(this.page);
        } else {
          this.$message({
            type: "error",
            message: "导入失败!",
          });
        }
      });
    },
    beforeUpload(file) {
      const isExcel =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/vnd.ms-excel";
      if (!isExcel) {
        this.$message.warning("导入文件格式只能上传.xlsx或.xls!");
      }

      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$message.warning("上传文件的大小不能超过 50M!");
      }

      return isLt50M && isExcel;
    },
    handleExceed(files) {
      this.$message.warning(`当前导入限制只能上传 1 个文件`);
    },
    changeUpload(file, fileList) {
      if (fileList.length > 0) {
        this.uploadlg.noUploadFile = false;
      } else {
        this.uploadlg.noUploadFile = true;
      }
    },
    reMoveUpload(file, fileList) {
      if (fileList.length === 0) {
        this.uploadlg.noUploadFile = true;
      }
    },
    uploadSuccess(response) {
      console.log(response);
    },
    submitFile() {
      // this.$refs['importform'].validate((valid) => {
      //   if (valid) {
      if (this.uploadlg.noUploadFile) {
        this.$message({
          type: "warning",
          message: "请选择文件",
        });

        return;
      }
      this.$refs.upload.submit();
      //   }
      // })
    },
    findCarPage() {
      let data = {
        page: this.nowPage1,
        pageSize: this.perPage1,
        carCode: this.formData.carNumber,
        BPayDate: this.formData.dateArr[0],
        EPayDate: this.formData.dateArr[1],
        month: this.formData.month,
        orderStatus: this.formData.status,
      };
      parking
        .findCarPage(data)
        .then((res) => {
          console.log(res);
          this.tableData1 = [];
          let tempList = res.data.data.records;
          this.totalNumber1 = res.data.data.total;
          this.currentPage1 = res.data.data.current;
          for (let i = 0; i < tempList.length; i++) {
            let tempObj = {};
            tempObj = tempList[i];
            tempObj.No=(res.data.data.current-1)*this.perPage1+i+1
            this.tableData1.push(tempObj);
          }
        })
        .catch((err) => {});
    },
    findLongCarPage() {
      let data = {
        page: this.nowPage3,
        pageSize: this.perPage3,
        carCode: this.formData.carNumber,
        BPayDate: this.formData.dateArr[0],
        EPayDate: this.formData.dateArr[1],
        month: this.formData.month,
        orderStatus: this.formData.status,
      };
      parking
        .findLongCarPage(data)
        .then((res) => {
          console.log(res);
          this.tableData3 = [];
          let tempList = res.data.data.records;
          this.totalNumber3 = res.data.data.total;
          this.currentPage3 = res.data.data.current;
          for (let i = 0; i < tempList.length; i++) {
            let tempObj = {};
            tempObj = tempList[i];
            tempObj.No=(res.data.data.current-1)*this.perPage3+i+1
            this.tableData3.push(tempObj);
          }
        })
        .catch((err) => {});
    },
    findTemporaryCarPage() {
      let data = {
        page: this.nowPage2,
        pageSize: this.perPage2,
        carCode: this.formData.carNumber,
        BPayDate: this.formData.dateArr[0],
        EPayDate: this.formData.dateArr[1],
        month: this.formData.month,
        orderStatus: this.formData.status,
      };
      parking
        .findTemporaryCarPage(data)
        .then((res) => {
          console.log(res);
          this.tableData2 = [];
          let tempList = res.data.data.records;
          this.totalNumber2 = res.data.data.total;
          this.currentPage2 = res.data.data.current;
          for (let i = 0; i < tempList.length; i++) {
            let tempObj = {};
            tempObj = tempList[i];
            tempObj.No=(res.data.data.current-1)*this.perPage2+i+1
            this.tableData2.push(tempObj);
          }
        })
        .catch((err) => {});
    },
    findCarSpacePage() {
      let data = {
        page: this.nowPage4,
        pageSize: this.perPage4,
        carCode: this.formData.carNumber,
        BPayDate: this.formData.dateArr[0],
        EPayDate: this.formData.dateArr[1],
        month: this.formData.month,
        orderStatus: this.formData.status,
      };
      parking
        .findCarSpacePage(data)
        .then((res) => {
          console.log(res);
          this.tableData4 = [];
          let tempList = res.data.data.records;
          this.totalNumber4 = res.data.data.total;
          this.currentPage4 = res.data.data.current;
          for (let i = 0; i < tempList.length; i++) {
            let tempObj = {};
            tempObj = tempList[i];
            tempObj.No=(res.data.data.current-1)*this.perPage4+i+1
            this.tableData4.push(tempObj);
          }
        })
        .catch((err) => {});
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 导入
    rmImport() {
      this.uploadlg.show = true;
      if (this.$refs.importform) {
        this.$refs.importform.resetFields();
      }
    },
    $_formatPayTypeList(row, column, cellValue) {
      if (cellValue) {
        let _types = this.payTypeList || [];
        let _obj =
          _types.find((value, index) => {
            return value.dictValue === cellValue;
          }) || {};
        return _obj.dictName || "";
      } else {
        return "/";
      }
    },
    $_formatOrderType(row, column, cellValue) {
      if (cellValue) {
        let _types = this.orderTypeList || [];
        let _obj =
          _types.find((value, index) => {
            return value.dictValue === cellValue;
          }) || {};
        return _obj.dictName || "";
      } else {
        return "/";
      }
    },
    $_formatStatus(row, column, cellValue) {
      if (cellValue) {
        let _types = this.statusList || [];
        let _obj =
          _types.find((value, index) => {
            return value.dictValue === cellValue;
          }) || {};
        return _obj.dictName || "";
      } else {
        return "/";
      }
    },
    countTime(int, out) {
      let start = new Date(int);
      let end = new Date();
      if (out) {
        end = new Date(out);
      }
      let startTime = start.getTime();
      let endTime = end.getTime();
      let remain = endTime - startTime;
      let h = parseInt(remain / 1000 / 60 / 60);
      let m = parseInt((remain / 1000 / 60) % 60);
      let s = parseInt((remain / 1000) % 60);
      return h + "时" + m + "分" + s + "秒";
    },

    handleCurrentChange1(val) {
      this.nowPage1 = val;
      this.findCarPage();
    },
    handleCurrentChange2(val) {
      this.nowPage2 = val;
      this.findTemporaryCarPage();
    },
    handleCurrentChange3(val) {
      this.nowPage3 = val;
      this.findLongCarPage();
    },
    handleCurrentChange4(val) {
      this.nowPage4 = val;
      this.findCarSpacePage();
    },
  },
};
</script>
<style scoped>
.repairList {
  margin: 0 auto;
  padding: 16px;
}
.searchBox >>> .el-range-editor--mini.el-input__inner {
  width: 100%;
}
.searchBox >>> .el-select {
  width: 100%;
}
.searchBox >>> .el-date-editor.el-input,
.searchBox >>> .el-date-editor.el-input__inner {
  width: 100%;
}
.searchBox >>> .el-date-editor .el-range-separator {
  width: 30px;
}
.addBtnBox {
  text-align: left;
}
.repairTable {
  margin-top: 20px;
}
.fenyeBox {
  margin-top: 20px;
  text-align: right;
}
.tableBox >>> .el-table td,
.tableBox >>> .el-table th {
  text-align: center;
}
</style>
